<template>
	<el-dialog title="添加品牌" :visible.sync="show" :before-close="handleClose">
	  <el-form :model="form" :rules="rules" ref="form">
	    <el-form-item label="品牌logo" :label-width="formLabelWidth">
	    	<div class="float-l clearfix">
				<imgUpload :imageUrl="form.image_url" :imageType="imageType" @getImageUrl="getPath"></imgUpload>
				<div class="upload-brand-image-remark">要求上传不得小于300*300px的正方形图片，格式为png、jpg，图片大小不得超过100KB</div>
			</div>
	    </el-form-item>
	    <el-form-item label="品牌名称" prop="brand_name" :label-width="formLabelWidth">
	      <el-input v-model="form.brand_name" style="width:300px" auto-complete="off" placeholder="最多可输入12个字"></el-input>
	    </el-form-item>
	    <el-form-item label="品牌描述" prop="brand_introduction" :label-width="formLabelWidth">
	      <el-input type="textarea" :rows="3" v-model="form.brand_introduction" auto-complete="off" placeholder="最多可输入30个字"></el-input>
	    </el-form-item>
	  </el-form>
	  <div slot="footer" class="dialog-footer">
	    <el-button @click="cancel">取 消</el-button>
	    <el-button type="primary" @click="save('form')">确 定</el-button>
	  </div>
	</el-dialog>
</template>
<script>
	import imgUpload from "@/components/func/imageUpload"
	import { brandCreate,brandUpdate,getBrand } from "@/api/commodity"

	export default {
		data() {
			return {
				form: {
					image_url: '',
					brand_name: '',
					brand_introduction: ''
				},
				formLabelWidth: "80px",
				imageType:"brand",
				rules: {
					brand_name: [{
			            	required: true,
			            	message: '请输入活动名称',
			            	trigger: 'blur'
			            }, {
			            	max: 12,
			            	message: '最多可输入12个字符',
			            	trigger: 'blur'
			            }
			        ],
			        brand_introduction: [{
				        	required: true,
				        	message: '请输入品牌描述',
				        	trigger: 'submit'
				        }, {
			            	max: 30,
			            	message: '最多可输入30个字符',
			            	trigger: 'blur'
			            }
			        ]
				}
			}
		},
		props: ['show','id'],
		components: {
			imgUpload
		},
		methods: {
			getPath(data){
				this.form.image_url = data.new_url
			},
			cancel() {
				this.$emit('cancel')
			},
			handleClose(done) {
				this.cancel()
				// done()
			},
			save(formName) {
				if(!this.form.image_url) {
					this.$message('请上传品牌图标');
					return;
				}
				this.saveBrandData(formName)
			},
			defaultData() {
				this.form = {
					image_url: '',
					brand_name: '',
					brand_introduction: ''
				}
			},
			getBrandData(id) {
				if(id == 0 || !this.show) {
					return
				}
				getBrand(id).then((data) => {
					this.form = data.data
				}).catch((data) => {
					this.$message.error(data.errorcmt);
				})
			},
			saveBrandData(form) {
				this.$refs[form].validate((valid) => {
		          if (valid) {
		          	if(this.id) {
						brandUpdate(this.form,this.id).then((data) => {
							this.$store.dispatch("doBrandList");
							this.defaultData()
							this.$emit('save');
							this.cancel()
						}).catch((data) => {
							this.$message.error(data.errorcmt);
						})
					}else{
						brandCreate(this.form).then((data) => {
							this.$store.dispatch("doBrandList");
							this.defaultData()
							this.$emit('save');
							this.cancel()
						}).catch((data) => {
							this.$message.error(data.errorcmt);
						})
					}
		          } else {
		            return false;
		          }
		        })
			}
		},
		watch: {
			show:function(curVal,oldVal) {
				this.getBrandData(this.id)
			}
		}
	}
</script>

<style lang="scss">
	.upload-brand-image-remark {
		position: absolute;
	    bottom: 0;
	    margin-left: 110px;
	    font-family: PingFangSC-Regular;
		font-size: 12px;
		color: #7F7F7F;
		letter-spacing: 0;
	    line-height: 13px;
	}
	.imageUpload{
		float: left;
		width: 100px;
		height: 100px;
		.imageUpload_con{
			margin-top: -24px;
			margin-left: -28px;
			p{
				margin-top: 0;
			}
			svg{
				display: block;
				margin: 0 auto;
			}
		}
	}
</style>